<template>
  <div class="wrapper" >
    <div class="form-box"
        style="margin: 200px auto; background-color:  rgba(255,255,255,0.5);width: 400px; height: 420px; padding: 20px; border-radius: 10px">
      <div style="margin: 40px 0; text-align: center; font-size: 30px"><b>登 录</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="margin: 40px 0; text-align: center">
          <el-button type="warning"  autocomplete="off" @click="$router.push('/register')">注册</el-button>
          <el-button type="primary"  autocomplete="off" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {setRoutes} from "@/router";



export default {
  name: "Login",
  data() {
    return {
      date:"",
      bgcDate:"",
      user: {},
      bgcUrl:"",
      identifyCodes: "1234567890",
      identifyCode: "",
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  created() {
    // this.getDate()
    // const date = new Date().toJSON().split('T').join(' ').substr(0,10)
    // //替换“-”
    // var dateStr = date.replace(/\-/g, "");
    // // const bgcDate = localStorage.getItem('bgcDate')
    // const bgcUrl = localStorage.getItem('bgcUrl')
    //
    // this.getPic()
},
  methods: {
    // getPic(){
    //   this.request.get("https://bing.biturl.top/?resolution=1920&format=json&index=0&mkt=zh-CN").then(res=>{
    //     console.log(res)
    //     this.bgcUrl=res.url
    //     localStorage.setItem('bgcUrl',this.bgcUrl)
    //   })
    // },
    login() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/user/login", this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem("user", JSON.stringify(res.data))  // 存储用户信息到浏览器
              localStorage.setItem("menus", JSON.stringify(res.data.menus))  // 存储用户信息到浏览器
              // 动态设置当前用户的路由
              setRoutes()
              if (res.data.role === 'ROLE_STUDENT') {
                this.$router.push("/login")
                this.$message.success("登录成功")
              } else {
                this.$router.push("/manage")
                this.$message.success("登录成功")
              }
              this.$router.push("/manage")
              // this.$message.success("登录成功，欢迎您！")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
    }

  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  /*background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);*/
  background: url(../assets/img/bgcpicc.jpg) center no-repeat;
  overflow: hidden;

}
.code {
  margin: 10px auto;
  width: 114px;
  height: 40px;
  border: 1px solid red;
}

</style>
